const App = () => {
  const clickHandler = (e) => {
    console.log(e);
    /**
     * e为事件对象，经过React包装，不需考虑兼容性问题。
     *    - 不是原生的事件对象
     */
  };

  const clickAHandler = (e) => {
    alert("点击了超链接");
    /**
     * React中无法使用return false取消默认行为
     */
    e.preventDefault(); //取消默认行为，不跳转到百度
  };

  const popHandler = (e) => {
    e.stopPropagation(); //取消冒泡
    alert("测试冒泡");
  };

  return (
    <div>
      <button onClick={clickHandler}>点我一下</button>
      <a href="https://www.baidu.com" onClick={clickAHandler}>
        超链接
      </a>
      <div
        style={{
          width: "100px",
          height: "100px",
          backgroundColor: "yellowgreen",
        }}
        onClick={popHandler}
      >
        <div
          style={{
            width: "80px",
            height: "80px",
            backgroundColor: "springgreen",
          }}
          onClick={popHandler}
        >
          测试冒泡
        </div>
      </div>
    </div>
  );
};

export default App;
